<template>
    <div>
        <h3>当前位置：</h3>
        <p> {{addressInfo.addressDetail}} </p>
        <Map :remark="false"
             @initlivepositionievent="livePositionEvent"
             @changelivepositionevent="livePositionEvent"
             :address-init-info-arr="addressInitInfoArr"
             ref="articleMap"
        ></Map>
    </div>
</template>

<script>
    import Map from '@/components/Map';

    export default {
        data() {
            return {
                addressInfo: {},
                addressInitInfoArr: []
            };
        },
        components: {
            Map
        },
        methods: {
            livePositionEvent(addressInfo) {
                this.addressInfo = addressInfo;
            },
            //获取文章地址集合用于展示
            getAddressInitInfoArr() {
                this.addressInitInfoArr = [];
                this.$api.Info.map().then((data) => {
                    if (data && data.code === 0) {
                        this.addressInitInfoArr = data.data.map(item=>{
                            item.addressDetail = `<div>用户数量:${item.userNum}</div>
                                                  <div>文章数量:${item.articleNum}</div>`;
                            return item;
                        });
                        this.$nextTick(() => {
                            this.$refs['articleMap'].resetMakers();
                        });
                    }
                })
            }
        },
        mounted() {
            this.getAddressInitInfoArr();
        }
    };
</script>

<style scoped>

</style>